window.addEventListener('load', function() {
    let header = document.querySelector('.header')
    let gif_img = document.querySelector('.gif_img')
        // console.log(header);

    document.addEventListener('scroll', function() {
        if (window.pageYOffset > 10) {
            header.style.backgroundColor = '#191919'
        } else {
            header.style.backgroundColor = '#191919'
            header.style.opacity = '0.8'
        }
    })

    let hlis = document.querySelectorAll('.hd_nav li')
    let blis = document.querySelectorAll('.bd_nav li')
        // console.log(hlis, blis);

    for (let i = 0; i < hlis.length; i++) {
        hlis[i].setAttribute('index', i)
        hlis[i].addEventListener('click', function() {
            for (let i = 0; i < hlis.length; i++) {
                hlis[i].className = ''
            }
            this.className = 'cut'

            let index = this.getAttribute('index')

            for (let j = 0; j < blis.length; j++) {
                blis[j].className = ''
            }
            blis[index].className = 'current'
        })
    }


})